<template>
  <div>
    <el-card class="box-card box-margin-bottom-none bar" :shadow="shadow">
      <slot name="header">
        <div
          v-if="title"
          slot="header"
          :style="headstyle"
          class="card-header clearfix"
        >
          <div class="hader-title clearfix" :style="{'--tcolor': tcolor!=null ? tcolor:'#409eff'}">
            <span>{{ title }}</span>
            <div class="hader-title-right">
              <slot name="operate"></slot>
            </div>
          </div>
        </div>
      </slot>
      <div>
        <slot></slot>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    title: {
      type: String,
      default: "",
    },
    shadow: {
      type: String,
      default: "always",
    },
    headstyle: {
      type: Object,
      default() {
        return {};
      },
    },
    tcolor: {
      type: String,
      default() {
        return null;
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.bar {
  $heitht: 40px;
  margin-bottom: 20px;
  // 修改原有el样式
  .el-card__header {
    padding: 0px;
  }
  .el-card__body {
    padding: 9px;
  }
  .card-header {
    display: flex;
    height: $heitht;
    background-color: #f2f2f2;
    .hader-title {
      position: relative;
      line-height: $heitht;
      padding-left: 30px;
      width: 100%;
      span{
        font-family: "SourceHanSansCN","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"\5B8B\4F53";
        font-weight: bold;
      }
      &::before {
        position: absolute;
        top: 0;
        height: 20px;
        width: 4px;
        margin-right: 5px;
        /* margin-top: 10px; */
        background-color: var(--tcolor);
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
      }
      &-right {
        float: right;
        margin-right: 15px;
      }
    }

  }
}
</style>
